<!--
 * @Author: chunlai
 * @Date: 2025-11-17 15:23:54
 * @LastEditTime: 2025-11-26 09:55:39
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\renewal\components\Appnt.vue
 * @Description: 投保人
-->
<template>
  <div class="customer_infos">
    <div class="info-mode-head">
      <span class="head-box title">投保人</span>
      <div class="flex-end" @click="enfold = !enfold">
        {{ msgObj.name }}
        <span
          :class="enfold ? 'ms-row2-icon' : 'ms-row-icon'"
          style="margin-left: 8px"
        ></span>
      </div>
    </div>
    <div
      class="enfold-model"
      :class="{ disabledForm: disabledEdit }"
      v-if="enfold"
    >
      <div class="info-mode-head">
        <span class="head-box">证件类型</span>
        <div class="flex-end">
          {{ msgObj.idName }}
        </div>
      </div>
      <div class="info-mode-head">
        <span class="head-box">证件号码</span>
        <div class="flex-end">
          {{ msgObj.idNum }}
        </div>
      </div>
      <div class="info-mode-head">
        <span class="head-box">电子邮箱</span>
        <div class="flex-end">
          {{ msgObj.email }}
        </div>
      </div>
      <div class="info-mode-head">
        <span class="head-box">手机号</span>
        <div class="flex-end">
          {{ msgObj.phone }}
        </div>
      </div>
      <van-field
        class="sms-code-box"
        input-align="right"
        v-model="validCode"
        label="短信验证"
        type="number"
        maxlength="6"
        clearable
        placeholder="请输入"
      >
        <VerifyCode :phone="msgObj.phone" slot="button"></VerifyCode>
      </van-field>
      <div class="info-mode-head">
        <span class="head-box">有无社保</span>
        <div class="flex-end">
          <MsRadio
            :curVal="msgObj.socialInsuFlag"
            btnType="socialInsuFlag"
            labelName="text"
            valueName="keyId"
            flexName="mag0"
            :arrList="socialSecList"
            @clickEvent="changeRadioInfo"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import VerifyCode from "@/views/form/components/VerifyCode.vue";
export default {
  name: "AppntInfo",
  props: {
    msgObj: {
      type: Object,
      default: () => {},
    },
  },
  components: { VerifyCode },
  data() {
    return {
      enfold: true,
      validCode: "",
    };
  },
  computed: {
    ...mapGetters({
      applicant: "insert/applicant",
      socialSecList: "dictionary/socialSecList",
    }),
  },
  watch: {
    validCode: {
      handler: function (value) {
        this.$store.commit("insert/UPDATE_APPLICANT", {
          validCode: value,
        });
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    if (this.applicant.validCode) {
      this.validCode = this.applicant.validCode;
    }
  },
  methods: {
    changeRadioInfo(obj, key) {
      let data = {
        socialInsuFlag: obj.keyId,
        socialInsuFlagName: obj.text,
      };
      this.$store.commit("insert/UPDATE_APPLICANT", data);
      this.$forceUpdate();
      this.$store.dispatch("risks/setRisks", {});
    },
  },
};
</script>
<style lang="less" scoped>
@import "./user.less";
.sms-code-box {
  padding: 10px 0 !important;
  /deep/.van-field__label {
    line-height: 28px;
    padding-left: 10px !important;
  }
  &::after {
    left: 0 !important;
    right: 0 !important;
  }
}
</style>
